<template>
  <div class="a">
    <div class="cxtj">
      <p>查询条件</p>
      <div class="time">
        <span>时间范围</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <el-button type="small">查询</el-button>
    </div>
    <div class="yjxx">
      <p>预警信息</p>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="信号"> </el-table-column>
        <el-table-column prop="name" label="发布时间"> </el-table-column>
        <el-table-column prop="address" label="预警地区"> </el-table-column>
        <el-table-column prop="address" label="预警等级"> </el-table-column>
        <el-table-column prop="address" label="预警类型"> </el-table-column>
        <el-table-column prop="address" label="签发人"> </el-table-column>
        <el-table-column prop="address" label="值班人"> </el-table-column>
      </el-table>
    </div>
    <div class="xxqy">
      <p>详细区域</p>
      <el-input type="textarea" :rows="2" v-model="textarea" width="300px">
      </el-input>
    </div>
    <div class="bottom">
      <div class="dj">
        <span>预警等级</span
        ><el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="lx">
        <span>预警类型</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="tb">
        <span>预警图标</span>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="bz">
        <span>标准</span>
        <el-input
          type="textarea"
          :rows="2"
          v-model="textarea"
          width="300px"
        ></el-input>
      </div>
      <div class="zn">
        <span>防御指南</span>
        <el-input
          type="textarea"
          :rows="2"
          v-model="textarea"
          width="300px"
        ></el-input>
      </div>
      <div class="sj">
        <span>发布时间</span>
        <el-date-picker
          v-model="value1"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div class="zbry">
        <span>值班人员</span>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
      <div class="qfry">
        <span>签发人员</span>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>
  </div>
</template>
<script></script>
<style scoped lang="less">
.a {
  pointer-events: all;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  .cxtj {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 10px 0;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    .el-date-editor {
      width: 200px;
    }
    /deep/.el-range-input {
      font-size: 10px;
    }
    span {
      margin-right: 10px;
    }
    .time {
      margin: 10px auto;
    }
  }
  .yjxx {
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin-top: 10px;
    }
    /deep/.el-table {
      font-size: 10px;
      width: 300px;
      overflow-x: auto;
    }
  }
  .xxqy {
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin: 10px auto;
    }
    .el-textarea {
      width: 300px;
      font-size: 10px;
    }
  }
  .bottom {
    padding-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid #dedede;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .dj,
    .lx,
    .tb,
    .bz,
    .zn,
    .sj,
    .zbry,
    .qfry {
      display: flex;
      width: 400px;
      align-items: center;
      flex-wrap: nowrap;
      margin: 10px auto;
      span {
        margin-right: 10px;
        width: 50px;
      }
      .el-input,
      .el-textarea {
        width: 300px;
        font-size: 10px;
      }
    }
  }
}
</style>
